<template>
  <div>
    <card-item :list="list" :data="cardData" />
  </div>
</template>
<script>
  import { defineComponent, reactive, toRefs } from 'vue';
  import { unbalanceList } from '../static/trafficJam';
  import cardItem from './card-item.vue';
  export default defineComponent({
    components: { cardItem },
    setup() {
      const state = reactive({
        cardData: {
          value: '暂无数据',
          value1: '0',
          value2: '0',
          value3: '0km/h',
          value4: '0km/h',
        },
        list: unbalanceList,
      });
      return {
        ...toRefs(state),
      };
    },
  });
</script>
